<!DOCTYPE html>
<html>
{{import "module/pc-header.hbs"}}
<body class="bg">
  <div class="ui middle aligned center aligned grid" style="height: 100%">
		<div class="column" style="max-width: 450px;">
			<h2 class="ui teal image header">
				<!-- <img src="/img/logo.png" class="logo"> -->
				<div class="content">vps monitor</div>
			</h2>
			<form class="ui large form">
				<div class="ui stacked segment">
					<div class="field">
						<div class="ui left icon input">
							<i class="user icon"></i>
							<input type="text" placeholder="用户名" name="name" id="name">
						</div>
					</div>
					<div class="field">
						<div class="ui left icon input">
							<i class="lock icon"></i>
							<input type="password" placeholder="密码" name="password" id="password">
						</div>
					</div>
					<div class="ui fluid large teal submit button" id="login">Login</div>
				</div>
			</form>
		</div>
	</div>
	<script>
		$(function(){
			$("#login").click(function(){
				$.ajax({
					url:"/api/login",
					type: "POST",
					data:  {name: $("#name").val(), password: $("#password").val()},
					success: function(data){
						location.href = "list.html"
					},
					error:function(resp){
						console.log(resp.status, resp.responseJSON)
					}
				})
			})
		})
	</script>
</body>
</html>
